<template>
  <div id="div">
    <div class="head">
      <h1>供水调度系统</h1>
    </div>
    <div class="contain">
      <el-row>
        <el-col :span="24" style="padding: 0.1rem">
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter" style="width: 25%">
                  {{ supply | tofix(0) }}
                  <span style="font-size: 0.3rem"></span>
                </li>
                <li class="pulll_left counter" style="width: 25%">
                  {{ intaking | tofix(0) }}
                  <span style="font-size: 0.3rem"></span>
                </li>
                <li class="pulll_left counter" style="width: 25%">
                  {{ power  | tofix(0)}}
                  <span style="font-size: 0.3rem"></span>
                </li>
                <li class="pulll_left counter" style="width: 25%">
                  {{ energy | tofix(0) }}
                  <span style="font-size: 0.3rem"></span>
                </li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left" style="width: 25%">供水量(m³)</li>
                <li class="pulll_left" style="width: 25%">取水量(m³)</li>
                <li class="pulll_left" style="width: 25%">电量(KW·h)</li>
                <li class="pulll_left" style="width: 25%">能耗(KW·h/Km³)</li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">原水</div>
            <ul class="listBoard">
              <li>
                <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                <div>原水浊度<bdi class="unit">NTU</bdi></div>
                <span>{{ data[53] && data[53].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>原水PH<bdi class="unit"></bdi></div>
                <span>{{ data[54] && data[54].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/浊度.svg')" style="width:30px;height:28px" />
                <div>原水氨氮<bdi class="unit">mg/L</bdi></div>
                <span>{{ data[51] && data[51].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>原水总锰<bdi class="unit">mg/L</bdi></div>
                <span>{{ data[52] && data[52].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>原水COD<bdi class="unit">mg/L</bdi></div>
                <span>{{ data[55] && data[55].value | tofix(2) }}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">出厂水</div>
            <ul class="listBoard">
              <li>
                <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                <div>出厂余氯<bdi class="unit">mg/L</bdi></div>
                <span>{{ data[63] && data[63].value | tofix(1) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>1#出厂流量<bdi class="unit">m³/h</bdi></div>
                <span>{{ rawData[115] && rawData[115].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/浊度.svg')" style="width:30px;height:28px" />
                <div>2#出厂流量<bdi class="unit">m³/h</bdi></div>
                <span>{{ rawData[116] && rawData[116].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>出厂浊度<bdi class="unit">NTU</bdi></div>
                <span>{{ data[62] && data[62].value | tofix(2) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>出厂PH<bdi class="unit"></bdi></div>
                <span>{{ data[66] && data[66].value | tofix(2) }}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">电度<bdi class="unit">KWh</bdi></div>
            <ul class="listBoard" style="padding-top: 0; margin-top: -0.1rem">
              <li>
                <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                <div>1#高压进线柜<bdi class="unit"></bdi></div>
                <span>{{ data[15] && data[15].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>2#高压进线柜<bdi class="unit"></bdi></div>
                <span>{{ data[16] && data[16].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/浊度.svg')" style="width:30px;height:28px" />
                <div>1期1#干式变压器<bdi class="unit"></bdi></div>
                <span>{{ data[17] && data[17].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>1期2#干式变压器<bdi class="unit"></bdi></div>
                <span>{{ data[18] && data[18].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>2期3#干式变压器<bdi class="unit"></bdi></div>
                <span>{{ data[19] && data[19].value | tofix(0) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/水质余氯.svg')" style="width:30px;height:28px" />
                <div>2期4#干式变压器<bdi class="unit"></bdi></div>
                <span>{{ data[20] && data[20].value | tofix(0) }}</span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" style="padding: 0.1rem 0.1rem 0px">
          <div class="boxall" style="height: 3.2rem">
            <div class="alltitle">水位<bdi class="unit">m</bdi></div>
            <ul class="listBoard" style="padding-top: 0; margin-top: -0.1rem">
              <li>
                <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                <div>1#吸水井水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[128] && rawData[128].value | tofix(3) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/dycdpsliuliangfuwu.svg')" style="width:30px;height:28px" />
                <div>2#吸水井水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[129] && rawData[129].value | tofix(3) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>5#清水池水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[558] && rawData[558].value | tofix(3) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>6#清水池水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[559] && rawData[559].value | tofix(3) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>7#清水池水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[560] && rawData[560].value | tofix(3) }}</span>
              </li>
              <li>
                <img :src="require('@/assets/img/svg/pH值.svg')" style="width:30px;height:28px" />
                <div>8#清水池水位<bdi class="unit"></bdi></div>
                <span>{{ rawData[561] && rawData[561].value | tofix(3) }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="padding: 0.1rem">
          <div class="boxall" style="height: 3.2rem">
            <bar-chart :chart-data="barChartData1" />
          </div>
        </el-col>
        <el-col :span="8" style="padding: 0.1rem">
          <div class="boxall" style="height: 3.2rem">
            <div class="float">
              <pie-chart :chart-data="pieChartDataElec" />
            </div>
            <div class="float">
              <pie-chart :chart-data="pieChartDataWater" />
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="padding: 0.1rem">
          <div class="boxall" style="height: 3.2rem">
            <bar-chart :chart-data="barChartData3" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import "@/assets/resources/comon0.css";
import PieChart from './dashboard/PieChart2'
import BarChart from './dashboard/BarChart2'
import { tofix } from "@/filters";
import { findAll } from '@/api/dispatch/runningState'
import { getRealDataAllList } from "@/api/water/realData";
import { get5EDay } from "@/api/water/reportMonth";
import { round } from "@/utils"
import { parseTime } from "@/utils/ruoyi";

const barChartData = {
  elect: {
    name: "近五天能耗对比",
    text: "近五天能耗对比",
    xAxis: ["1#泵", "2#泵", "3#泵", "4#泵", "5#泵"],
    data: [320, 332, 301, 334, 390],
  },
  water: {
    name: "近五天水量对比",
    text: "近五天水量对比",
    xAxis: ["1#泵", "2#泵", "3#泵", "4#泵", "5#泵"],
    data: [320, 332, 301, 334, 390],
  },
};

const pieChartData = {
  electric: {
    text: "电量占比",
    name: ["1期1#干式变压器", "1期2#干式变压器", "2期3#干式变压器", "2期4#干式变压器"],
    value: [320, 342, 350, 362],
  },
  water: {
    text: "水量占比",
    name: ["DN2000出厂水", "DN1800出厂水"],
    value: [320, 342],
  },
};

// 设置rem
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName("html")[0];
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  htmlDom.style.fontSize = `${htmlWidth / 20}px`;
};

export default {
  name: 'Index',
  components: {
    PieChart,
    BarChart
  },
  data() {
    return {
      setHtmlFontSize: setHtmlFontSize,
      barChartData1: barChartData.elect,
      // private barChartData2 = barChartData.power;
      barChartData3: barChartData.water,
      pieChartDataElec: pieChartData.electric,
      pieChartDataWater: pieChartData.water,
      data: [],
      rawData: [],
      supply: undefined,
      intaking: undefined,
      power: undefined,
      energy: undefined,
      timer: null,
    }
  },
  created() {
    window.onresize = this.setHtmlFontSize;
    this.setHtmlFontSize();
  },
  mounted() {
    this.getData();
    this.timer = setInterval(this.getData, 1000 * 30);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getData() {
      findAll().then((response) => {
        this.rawData = response.data;
      });
      get5EDay().then((response) => {
        const data = response.data;
        this.supply = data[0].a7 + data[0].a8
        this.intaking = data[0].a1 + data[0].a2 + data[0].a3
        this.power = data[0].a16 + data[0].a17 - data[0].a29 - data[0].a30 - data[0].a31 - data[0].a32 - data[0].a33 - data[0].a34 - data[0].a35
        this.energy = round(this.power / this.supply, 2)
        const bar = this.BarChartData(response.data)
        this.barChartData1.xAxis = bar.rtimeArr.reverse()
        this.barChartData1.data = bar.energyArr.reverse()
        this.barChartData3.data = bar.supplyArr.reverse()
        this.barChartData3.xAxis = bar.rtimeArr
      });
      getRealDataAllList().then((response) => {
        this.data = response.data
        const pie = this.pieChartData(response.data)
        this.pieChartDataElec.value = pie.energyArr
        this.pieChartDataWater.value = pie.supplyArr
      });
    },
    pieChartData(data) {
      let supplyArr = []
      let energyArr = []
      if (data[0] != null && data[0].value != null) {
        supplyArr.push(data[17].value)
        supplyArr.push(data[18].value)
        supplyArr.push(data[19].value)
        supplyArr.push(data[20].value)
        energyArr.push(data[6].value)
        energyArr.push(data[7].value)
      } else {
        supplyArr = [0, 0, 0]
        energyArr = [0, 0]
      }
      return { supplyArr, energyArr }
    },
    BarChartData(data) {
      const supplyArr = []
      const energyArr = []
      const rtimeArr = []
      if (data[0] != null && data[0].a7 != null) {
        let supply = data[0].a7 + data[0].a8
        let power = data[0].a16 + data[0].a17 - data[0].a27 - data[0].a28 - data[0].a29 - data[0].a30 - data[0].a31 - data[0].a32 - data[0].a33
        let energy = round(power / supply, 2)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[0].rtime, "{m}-{d}"))
      }
      else {
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[1] != null && data[1].a7 != null) {
        let supply = data[1].a7 + data[1].a8
        let power = data[1].a16 + data[1].a17 - data[1].a27 - data[1].a28 - data[1].a29 - data[1].a30 - data[1].a31 - data[1].a32 - data[1].a33
        let energy = round(power / supply, 2)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[1].rtime, "{m}-{d}"))
      }
      else {
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[2] != null && data[2].a7 != null) {
        let supply = data[2].a7 + data[2].a8
        let power = data[2].a16 + data[2].a17 - data[2].a27 - data[2].a28 - data[2].a29 - data[2].a30 - data[2].a31 - data[2].a32 - data[2].a33
        let energy = round(power / supply, 2)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[2].rtime, "{m}-{d}"))
      }
      else {
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[3] != null && data[3].a7 != null) {
        let supply = data[3].a7 + data[3].a8
        let power = data[3].a16 + data[3].a17 - data[3].a27 - data[3].a28 - data[3].a29 - data[3].a30 - data[3].a31 - data[3].a32 - data[3].a33
        let energy = round(power / supply, 2)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[3].rtime, "{m}-{d}"))
      }
      else {
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      if (data[4] != null && data[4].a7 != null) {
        let supply = data[4].a7 + data[4].a8
        let power = data[4].a16 + data[4].a17 - data[4].a27 - data[4].a28 - data[4].a29 - data[4].a30 - data[4].a31 - data[4].a32 - data[4].a33
        let energy = round(power / supply, 2)
        supplyArr.push(supply)
        energyArr.push(energy)
        rtimeArr.push(parseTime(data[4].rtime, "{m}-{d}"))
      }
      else {
        supplyArr.push(0)
        energyArr.push(0)
        rtimeArr.push('0')
      }
      return { supplyArr, energyArr, rtimeArr }
    }
  }
}
</script>

<style scoped>
* {
  font-size: 0.15rem;
}

#div {
  background: #000d4a top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
}

.map {
  width: 100%;
  height: 900px;
}

.contain {
  padding: 0 0.1rem 0 0.1rem;
}

.alltitle {
  font-size: 0.3rem;
}

.listBoard {
  padding-top: 0.2rem;
}

.listBoard li div:first-child {
  display: inline-block;
  width: 0.5rem;
}

.listBoard li div:nth-child(2) {
  font-size: 0.28rem;
  color: hsla(0, 0%, 100%, 0.7);
  display: inline-block;
  width: 2.5rem;
}

.listBoard li span {
  font-family: electronicFont;
  color: #ffeb7b;
  font-size: 0.4rem;
}

.float {
  display: inline;
  float: left;
  width: 200px;
}

.unit {
  font-size: 0.2rem;
}
</style>
